<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <style type="text/css"></style>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>JS 在线统计图表制作工具, 在线统计图, 曲线图, 折线图, 柱状图, 饼图, 直方图, JS 图表, 免费的 JS 统计图表生成器</title> 
  <meta name="keywords" content="在线图表制作工具,在线统计图,曲线图,折线图,柱状图,饼图,直方图,JS图表,JS统计图表" /> 
  <meta name="description" content="这是一个免费的在线生成各种数据图表的工具, 可像 Excel 一样编辑" /> 
  <script src="/static/tongjitu/jquery.min.js"></script> 
  <script src="/static/tongjitu/highcharts.js"></script> 
  <script src="/static/tongjitu/jquery.handsontable.full.js"></script> 
  <link rel="stylesheet" media="screen" href="/static/tongjitu/style.css" /> 
 </head> 
 <body>

<?php 
    if($request != 'perhour'){
?>
<fieldset id="form" style="margin:20px 0; padding: 0;">
	<legend>查询条件表</legend>
	<table>
		<tr>
		
		<td>汇总周期:</td>
		<td>
			<select name="request">
				<option value="everyday" selected="selected" >以天统计</option>
				<option value="weekly">以周统计</option>
				<option value="monthly" >以月统计</option>
			</select>
		</td>
		<td>周期跨度:</td>
		<td>
			<select name="scale">
				<option value="4" selected="selected" >3</option>
				<option value="6">5</option>
				<option value="8" >7</option>
				<option value="10" >9</option>
				<option value="12" >11</option>
			</select>
		</td>
		<td><button id="select">查询</button></td>
		</tr>
		
	</table>
</fieldset>
<?php }?>

<fieldset id="form_" style="margin:20px 0; padding: 0;">
	<legend>生成图表</legend>
	<table>
		<tr>
			<td>类型:</td>
			<td>
				<select name="type">
					<option value="spline">曲线图</option>
					<option value="line">折线图</option>
					<option value="column" selected="selected">柱状图(竖柱)</option>
					<option value="bar">条形图(横条)</option>
					<option value="pie">饼图</option>
					<option value="area">面积图</option>
					<option value="scatter">XY散点图</option>
				</select>
			</td>
			<td><button id="typer" >生成图表</button></td>
		</tr>
		
	</table>
</fieldset>


<div id="charts" style="width: 98%; margin: 0; padding: 0;"></div>

<script type="text/javascript"><!--
var title = '<?php echo $title;?>';
var ytitle = '<?php echo $ytitle;?>';

    <?php 
    if($request == 'perhour'){
	    echo "var data = [['".implode("','",$type)."'],";
	    $key = array_keys($type);
	    $cha = $max - $min  +1;
	    for($i=0;$i<$cha;$i++){
	    	$time = $min+$i;
	    	$strr =  "['".$time."时',".$list[$key[1]][$i].",".$list[$key[2]][$i].",".$list[$key[3]][$i].",".$list[$key[4]][$i].",".$list[$key[5]][$i]
	    	.",".$list[$key[6]][$i].",".$list[$key[7]][$i]."]";
	    	if($i<($cha-1)) $strr .= ",";
	    	echo $strr;
	    }
	    echo "];";
	?>
	function perhour(){
		$.ajax({
			type: "post",
			url: "/Dataanalysis/perhour",
			data: "request=ajax",
			success: function(ret){
				data = eval(ret);
				type = $('select[name=type]').val();
				show_chart(type, title, ytitle, data);
			},
			dataType: "script"
		});	
	}
	
	window.setInterval(perhour, 5000); 
    <?php 
    }
    else{
    	echo "var data = [['".implode("','",$type)."'],";
    	$key = array_keys($type);
	    $cha = $scale;
	    for($i=0;$i<$cha;$i++){
	    	$strr =  "['".$list['dayname'.$i]."',".$list[$key[1]][$i].",".$list[$key[2]][$i].",".$list[$key[3]][$i].",".$list[$key[4]][$i].",".$list[$key[5]][$i]
	    	.",".$list[$key[6]][$i].",".$list[$key[7]][$i].",".$list[$key[8]][$i]."]";
	    	if($i<($cha-1)) $strr .= ",";
	    	echo $strr;
	    }
	    echo "];";
    ?>
    $('select[name=request]').val("<?php echo $request;?>");
    $('select[name=scale]').val("<?php echo $scale;?>");
    <?php 
    }
    ?>


$(function(){
	$(document).ready(function() {
		$('#typer').click(function(){
			var type = $('select[name=type]').val();
			show_chart(type, title, ytitle, data);
			return false;
		}).click();

		$('#select').click(function(){
			var request = $('select[name=request]').val();
			var scale = $('select[name=scale]').val();
			var url = "/Dataanalysis/"+request+"/?scale="+scale;
			window.location = url;
			return false;
		});
	});
});



function show_chart(type, title, ytitle, datagrid){
	var series = [];
	var xlabels = [];
	var xtitle = datagrid[0][0];

	for(i=1; i<datagrid[0].length-1; i++){
		var y = datagrid[0][i];
		if(y == '' || y == null){
			break;
		}
		series.push({
			name: y,
			data: []
		});
	}
	for(i=1; i<datagrid.length-1; i++){
		var x = datagrid[i][0];
		if(x == '' || x == null){
			break;
		}
		xlabels.push(x);
		for(j=1; j<datagrid[i].length-1; j++){
			if(datagrid[0][j].length == 0){
				continue;
			}
			var y = parseFloat(datagrid[i][j]);
			if(!isNaN(y)){
				series[j-1].data.push([x, y]);
			}else{
				series[j-1].data.push([x, null]);
			}
		}
	}
	var tmp = [];
	for(i=0; i<series.length; i++){
		if(series[i].data.length > 0){
			tmp.push(series[i]);
		//	alert(series[i].data);
		}
	}
	series = tmp;
	//alert(xlabels);
	//alert(series[0].data);

	$('#charts').html('');
	var charts = new Highcharts.Chart({
		chart: {
			renderTo: 'charts',
			type: type
		},
		title: {
			text: title
		},
		subtitle: {
			text: ''
		},
		xAxis: {
			title: {
				text: xtitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			categories: xlabels,
			min: 0, //
			//minRange: 1,
			minPadding: 1, //
			labels: {
				formatter: function() {
					return this.value + '';
				}
			}
		},
		yAxis: {
			title: {
				text: ytitle,
				style: {
					color: '#666',
					"font-size": '120%'
				}
			},
			labels: {
				formatter: function() {
					return this.value;
				}
			}
		},
		tooltip: {
			enabled: true,
			formatter: function() {
				return this.series.name + ': '+this.y +''; //
			}
		},
		plotOptions: {
			series:{
				connectNulls: true
			},
			line: {
				dataLabels: {
					enabled: true
				},
				enableMouseTracking: true
			},
			spline: {
				dataLabels: {
					enabled: true
				}
			},
			bar: {
				dataLabels: {
					enabled: true
				}
			},
			column: {
				dataLabels: {
					enabled: true
				}
			},
			area: {
				dataLabels: {
					enabled: true
				}
			},
			pie: {
				allowPointSelect: true,
				showInLegend: true,
				dataLabels: {
					enabled: true,
					formatter: function() {
						var p = this.percentage + '';
						var pos = p.indexOf('.');
						if(pos != -1){
							p = p.substr(0, pos + 2);
						}
						return '<b>'+ this.point.name +'</b>: ' + p +' %';
					}
				}
			}
		},
		series: series
	});
}

//
--></script>


</body>
</html>